﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>JBuss - 注册</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="js/plugins/layui/css/layui.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <style>
        #logo-div{
            width:100%;
        }
        h1.logo-name{
            width:600px;
            margin:0 auto;
            text-align: center;
        }
    </style>
</head>

<body class="gray-bg">

<div id="logo-div">

    <h1 class="logo-name" >JBuss</h1>

</div>
<div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
        <h3>欢迎使用JBuss服务</h3>
        <p>创建一个JBuss新账户</p>
        <form class="m-t" id="argForm" role="form" >
            <div class="form-group">
                <input type="text" name="email" class="form-control" autocomplete="off" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <input type="text" name="username" class="form-control" autocomplete="off" placeholder="请输入账号">
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" autocomplete="off" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <input type="password" name="confirmPassword" class="form-control" autocomplete="off" placeholder="请再次输入密码">
            </div>
            <div class="form-group" style="display: flex;">
                <input type="text" name="emailCode" class="form-control" autocomplete="off" placeholder="邮箱验证码" />
                <button type="button" class="time-tip btn btn-primary block full-width m-b" onclick="postEmailCode()">获取验证码</button>
            </div>
            <button type="button"class="btn btn-primary block full-width m-b" onclick="userRegister()">注 册</button>

            <p class="text-muted text-center">
                <small>已经有账户了？</small>
                <a href="login.html" target="_self">点此登录</a>
            </p>

        </form>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>
<script src="js/plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
<script>
    let remainingTime = 0;
    let interval;
    const calculateTime = function (){
        if (remainingTime > 0 ){
            remainingTime--;
            $(".time-tip").addClass("disabled")
            $(".time-tip").html(remainingTime+"s后重发");
        }else {
            remainingTime = 0
            $(".time-tip").removeClass("disabled")
            clearInterval(interval)
            $(".time-tip").html("获取验证码");
        }
    }

    // 发送验证码
    function postEmailCode() {
        if (remainingTime > 0){
            return
        }
        const formData = new FormData($("form#argForm")[0]);
        const url = 'sysUser/postEmailCode';
        jQuery.ajax({
            url:domain + url,
            type:"post",
            data:JSON.stringify(formData2JsonStr(formData)),
            contentType:"application/json;charset=utf-8",
            crossDomain:true,
            xhrFields:{
                withCredentials:true
            },
            success:function (data) {
                if(data.status == 200){
                    top.toastr.success(data.msg);
                }else{
                    top.toastr.warning(data.msg);
                }
                remainingTime = data.data;
                clearInterval(interval)
                interval = setInterval(calculateTime,1000)
            },
            error:function(data) {
                top.toastr.error("登录失败，请检查网络");
            }
        })
    }

    // 注册
    function userRegister() {
        var formData = new FormData($("form#argForm")[0]);
        var url = 'sysUser/userRegister';
        jQuery.ajax({
            url:domain + url,
            type:"post",
            data:JSON.stringify(formData2JsonStr(formData)),
            contentType:"application/json;charset=utf-8",
            crossDomain:true,
            xhrFields:{
                withCredentials:true
            },
            success:function (data) {
                if(data.status == 200){
                    top.toastr.success(data.msg);
                    layui.use(['layer'], function(){
                        var layer = layui.layer;
                        layer.confirm('去登陆', {
                            title:false,
                            closeBtn:0,
                            icon:1,
                            btn: ["确定"] //按钮
                        }, function(){
                            window.location.href = "/login.html?email="+formData.get("email");
                        });
                    });
                }else{
                    generateImageCode();
                    top.toastr.warning(data.msg);
                }
            },
            error:function(data) {
                top.toastr.error("登录失败，请检查网络");
            }
        })
    }

    function generateImageCode(){
        $("input[name=imageCode]").val("");
        $(".imageCode").attr("src",domain + "sysUser/generateImageCode?" + (new Date()).getTime());
    }

    $(function (){
        generateImageCode();
    })
</script>
</body>
</html>
